<template>
	<view>
		<view class="return" @click="toReturn()" style="box-shadow: 1rpx 2rpx 4rpx 2rpx gainsboro;z-index:2">
			<u-icon name="arrow-left" size="20"></u-icon>
		</view>
		<swiper class="swiper" circular indicator-active-color="#fff" :indicator-dots="indicatorDots"
			:autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(item,index) in images" :key="index">
				<image :src="item" mode="aspectFill" @click="toPre(item)"></image>
			</swiper-item>
		</swiper>
		<view class="infos">
			<view class="flex align between name">
				<view>{{infos.name}}</view>
				<view>路线</view>
			</view>
		</view>
		<!-- 路线简介 -->
		<view class="notice" v-if="infos.description!=''">
			<view class="notice-tit">路线描述</view>
			<view class="no-con">
				<rich-text :nodes="infos.description"></rich-text>
				<!-- <template is="wxParse" data="{{wxParseData:bindName.nodes}}" /> -->
			</view>
		</view>
		<!-- 路线卡券 -->
		<view class="notice">
			<view class="notice-tit" style="color: #d64b4b;">路线卡券</view>
			<view class="no-con">
				<view class="list flex" v-for="(item,index) in infos.coupon_list" :key="index">
					<view class="list-info">
						<view class="name" style="color: #d64b4b;">{{item.name}}</view>
						<view style="color: black;font-size: 24rpx;margin-bottom: 10rpx;">所属商家：{{item.merchant.name}}
						</view>
						<view>{{item.validity_desc}}</view>
						<view>{{item.use_description}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 路线简介 -->
		<view class="notice" v-if="infos.content!=''">
			<view class="notice-tit">路线简介</view>
			<view class="no-con">
				<rich-text :nodes="infos.content"></rich-text>
			</view>
		</view>
		<view class="notice">
			<view class="notice-tit">景区相册</view>
			<view class="no-imgs flex align between wrap">
				<image @click="toPre(item)" :src="item" mode="aspectFill" v-for="(item,index) in infos.images"
					:key="index"></image>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="bottom">
			<view @click="toOrder">一键领取</view>
		</view>
	</view>
</template>

<script>
	import {
		tourProductDetail,
		tourSubmit
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				id: '',
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				images: [],
				infos: ''
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail()
		},
		mounted() {},
		methods: {
			toOrder() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要领取该卡券吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.toOrderCom()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			async toOrderCom() {
				let code = uni.getStorageSync('code')
				const result = await tourSubmit({
					product_id: this.id,
					redeem_code: code
				})
				if (result.code == 1) {
					uni.showToast({
						title: '领取成功',
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/integral/coupon',
						})
					}, 1000)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			toPre(item) {
				let arr = this.infos.images
				uni.previewImage({
					urls: arr,
					current: item
				})
			},
			async getDetail() {
				const result = await tourProductDetail({
					product_id: this.id
				})
				if (result.code == 1) {
					this.infos = result.data
					this.images = result.data.images
				}
			},
			toReturn() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		height: 450rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	/* pages/hotel/detail.wxss */
	page {
		background: #F3F3F3;
		padding-bottom: 200rpx;
	}

	.banner {
		width: 100%;
		height: 420rpx;
		position: relative;
	}

	.banner swiper {
		height: 100%;
		width: 100%;
	}

	.banner .img {
		width: 100%;
		height: 100%;
	}

	.banner .btn {
		position: absolute;
		left: 34rpx;
		top: 189rpx;
		width: 208rpx;
		height: 34rpx;
	}

	.star {
		position: absolute;
		top: 16rpx;
		right: 24rpx;
	}

	.star image {
		width: 64rpx;
		height: 64rpx;
	}

	.infos {
		background: white;
		padding: 16rpx 24rpx;
	}

	.name view:nth-child(1) {
		width: 568rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

	}

	.name view:nth-child(2) {
		width: 88rpx;
		line-height: 35rpx;
		text-align: center;
		color: white;
		font-size: 18rpx;
		background: #007830;
		border-radius: 4rpx;
	}

	.rate {
		margin: 15rpx 0;
	}

	.rate-star {
		color: #007830;
		font-size: 24rpx;
	}

	.nums {
		color: #007830;
		font-size: 18rpx;
	}

	.tags {
		color: #007830;
		font-size: 18rpx;
		background: #E0F2E7;
		border-radius: 4rpx;
		width: fit-content;
		padding: 8rpx;
		margin-right: 8rpx;
	}

	.address {
		font-size: 24rpx;
		margin: 20rpx 0;
	}

	.addr view:nth-child(2) {
		color: #828282;
		font-size: 20rpx;
	}

	.addr-icon image {
		width: 54rpx;
		height: 54rpx;
	}

	.addr-icon {
		color: #007830;
		font-size: 14rpx;
	}

	.phone image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 8rpx;
	}

	.phone {
		font-size: 20rpx;
	}

	.phone text {
		color: #007830;
	}

	.tips {
		padding: 22rpx 24rpx;
		background: white;
		font-size: 28rpx;
		margin: 10rpx 0;
	}

	.tips-num {
		background: #E0F2E7;
		border-radius: 23rpx;
		color: #007830;
		font-size: 24rpx;
		padding: 2rpx 12rpx;
	}

	.list {
		background: white;
		margin: 20rpx 0rpx;
		padding: 24rpx;
		box-shadow: 1rpx 1rpx 10rpx 1rpx gainsboro;
		position: relative;
		border-radius: 10rpx;
	}


	.price {
		background: #d64b4b;
		border-radius: 8rpx;
		width: 180rpx;
		text-align: center;
		padding: 18rpx 0;
		color: white;

	}

	.price text {
		font-size: 16rpx;
	}

	.price view:nth-child(1) {
		font-size: 48rpx;
	}

	.price view:nth-child(2) {
		font-size: 24rpx;
		margin-top: 13rpx;
	}

	.list-info {
		width: 100%;
		font-size: 20rpx;
		color: #828282;
		margin-left: 10rpx;
	}

	.list-info .name {
		font-size: 32rpx;
		color: #262626;
		margin-bottom: 10rpx;
	}

	.list-btn {
		font-size: 26rpx;
		border: solid 1rpx;
		background: linear-gradient(to right, #007830, #2EAE61);
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		color: white;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
	}

	.pr-num {
		font-size: 14rpx;
		text-align: right;
		margin-right: 10rpx;
	}

	.pr-num .pr-num-y {
		text-decoration: line-through;
		color: #828282;
	}

	.pr-num view:nth-child(2) text {
		color: #C12F2F;
	}

	.pr-btn {
		background: #007830;
		border-radius: 8rpx;
		color: white;
		font-size: 28rpx;
		text-align: center;
		padding: 10rpx 18rpx 5rpx;
		width: fit-content;
	}

	.notice {
		background: white;
		padding: 30rpx 24rpx;
		margin-top: 10rpx;
	}

	.notice-tit {
		color: #007830;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.no-con {
		font-size: 28rpx;
	}

	.no-con image {
		width: 100%;
		height: 200rpx;
		margin-top: 10rpx;
	}

	.no-imgs image {
		width: 48%;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.custom {
		background: white;
		padding: 30rpx 24rpx;
		margin-top: 10rpx;
	}

	.custom-tit {
		color: #007830;
		font-size: 32rpx;
		font-weight: bold;
	}

	.stars {
		margin: 40rpx 0;
	}

	.cus-left {
		padding: 0 40rpx 0 24rpx;
		text-align: center;
		color: #007830;
		font-size: 28rpx;
		border-right: solid 1rpx #E2E2E2;
	}

	.cus-fen {
		font-size: 24rpx;
		text-align: center;
	}

	.cus-fen view:nth-child(1) {
		color: #007830;
		margin-bottom: 8rpx;
	}

	.cus-list {
		padding: 24rpx;
	}

	.cus-he-le image {
		width: 68rpx;
		height: 68rpx;
	}

	.le-name {
		font-size: 28rpx;
		margin: 0 16rpx;
	}

	.le-tabs {
		background: #007830;
		border-right: 4rpx;
		color: white;
		padding: 4rpx 26rpx;
		font-size: 18rpx;
	}

	.cus-he-ri {
		color: #828282;
		font-size: 24rpx;
	}

	.cus-com {
		font-size: 24rpx;
		margin: 18rpx 0;
	}

	.cus-tips {
		color: #828282;
		font-size: 24rpx;
		padding-bottom: 10rpx;
		border-bottom: solid 1rpx #E2E2E2;
	}

	.cus-reply {
		color: #007830;
		font-size: 24rpx;
		padding: 10rpx 0;
	}

	.cus-more {
		text-align: center;
		color: #007830;
		font-size: 18rpx;
	}

	.happ-tit {
		color: #007830;
		font-size: 32rpx;
		margin: 40rpx 30rpx;
		font-weight: bold;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		border-top: solid 1rpx #E2E2E2;
		padding: 20rpx 0;
		background: white;
		z-index: 2;
	}

	.bottom view {
		background: #d64b4b;
		color: white;
		text-align: center;
		margin: 0 50rpx;
		border-radius: 10rpx;
		padding: 20rpx 0;
	}
</style>